<template>
    <div class="wrapper">
        <h2>SlotFu</h2>
        <div class="content">
            <SlotCategory title="热门游戏列表">
                <template v-slot:name1>
                    <ul>
                        <li v-for="(game, index) in games" :key="game.id">{{ game.name }}</li>
                    </ul>
                </template>
            </SlotCategory>
            <SlotCategory title="今日美食城市">
                <template v-slot:name2>
                    <img :src="imgUrl" />
                </template>
            </SlotCategory>
            <SlotCategory title="今日影视推荐">
                <template v-slot:name3="params">
                    <video :src="videoUrl"></video>
                    {{ params }}
                </template>
            </SlotCategory>
        </div>
    </div>
</template>

<script lang="ts" setup name="SlotFu">

import { ref, reactive } from 'vue'
import SlotCategory from './SlotCategory.vue'

let games = reactive([
    { id: 1, name: '英雄联盟' },
    { id: 2, name: '王者荣耀' },
    { id: 3, name: '红色警戒' },
    { id: 4, name: '斗罗大陆' },
])

let imgUrl = 'https://z1.zx1x.com/2023/11/19/piNxLo4.jpg'

let videoUrl = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

.content {
    display: flex;
    justify-content: space-around;
}

img,
video {
    width: 100%;
    border: 1px solid #ebebeb;
}
</style>